<template>
  <NavBar></NavBar>
  <router-view v-slot="{ Component }">
    <keep-alive exclude="PlayList">
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <MusicControl></MusicControl>
  <Drawer></Drawer>
</template>

<script>
import { defineAsyncComponent, defineComponent } from "vue";
import { useStore } from "vuex";

import Storage from "@/utils/storage.js";

export default defineComponent({
  name: "App",
  components: {
    NavBar: defineAsyncComponent(() => import("@/components/navbar/NavBar")),
    MusicControl: defineAsyncComponent(() =>
      import("@/components/musiccontrol/MusicControl")
    ),
    Drawer: defineAsyncComponent(() => import("@/components/drawer/Drawer.vue"))
  },
  setup() {
    let store = useStore();
    let storage = new Storage();

    if (storage.getItem("store")) {
      store.replaceState(
        Object.assign({}, store.state, storage.getItem("store").value)
      );
    }
    window.addEventListener("beforeunload", () => {
      let param = {
        key: "store",
        value: store.state,
      };
      storage.setItem(param);
    });
    store.dispatch("initMusicListState")
  },
});
</script>

<style>
@import url("./assets/css/base.css");
</style>
